import { useEffect, useState } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import NavBar from "./components/NavBar";
import HomePage from "./pages/HomePage";
import ErrorPage from "./pages/ErrorPage";
import Profile from "./pages/Profile";
import Notes from "./pages/Notes";
import Video from "./pages/Video";
import Upload from "./pages/Upload";
import "./App.css";
import Login from "./pages/Login";

const router = createBrowserRouter([
	{
		path: "/",
		element: (
			<>
				<HomePage />
			</>
		),
		errorElement: <ErrorPage />,
	},
	{
		path: "/notes",
		element: (
			<>
				<Notes />
			</>
		),
		errorElement: <ErrorPage />,
	},
	{
		path: "/login",
		element: (
			<>
				<Login />
			</>
		),
		errorElement: <ErrorPage />,
	},
	{
		path: "/profile/:userId",
		element: (
			<>
				<Profile />
			</>
		),
		errorElement: <ErrorPage />,
	},
	{
		path: "/videos/:videoId",
		element: (
			<>
				<Video />
			</>
		),
		errorElement: <ErrorPage />,
	},
	{
		path: "/upload",
		element: <Upload />,
		errorElement: <ErrorPage />
	},
	{ path: "*", element: <NotFound />, errorElement: <ErrorPage /> },
]);

function NotFound() {
	const [userId, setUserId] = useState(null);
	/// mock the userId currently
	useEffect(() => {
		setUserId(0);
	}, []);

	return (
		<div className="App-container" data-testid="App">
			<NavBar userId={userId} />
			<ErrorPage err="NotFound" />
		</div>
	);
}

function App() {
	return (
		<>
			<RouterProvider router={router} />
		</>
	);
}

export default App;
